<template>
  <el-cascader
    v-model="productCategoryId"
    :options="options"
    :props="props"
    placeholder="选商品分类"
    @change="categoryDialogConfirm"
    clearable></el-cascader>
</template>

<script>
  import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
  import utils from '../../utils/utils.js'
  import { list as productCategoryList } from '@/api/productCategory'
  export default {
    data() {
      return {
        query:{
          productCategoryId:''
        },
        options: [],
        productCategoryId:'',
        props:{
          value:'id',
          label:'name',
          children:'childrens',
          checkStrictly:true
        }
      }
    },
    directives: {
      elDragDialog
    },
    components:{

    },
    created(){
      this.loadProductCategory()
    },
    methods: {
      loadProductCategory() {
        productCategoryList().then(response => {
          this.options = response.data
        }).catch(error => {
        })
      },
      categoryDialogConfirm(data){
        var _this = this
        if(!utils.isNull(data)){
          this.query.productCategoryId = data[_this.productCategoryId.length-1]
        }else{
          this.query.productCategoryId = ''
        }
         this.$emit('queryProductCategoryClick',this.query)
      }
    }
  }
</script>

<style>
</style>
